<template>
	<div>

		<div style="background: #fff;padding: 15px;margin-bottom: 20px;border-radius: 8px;">
			<div class="block displayFlex" style="margin-bottom: 10px;">
				<div>
					<span class="mr10 color-info">选择危废</span>
					<el-select v-model="params.entWasteId" placeholder="选择危废" @change="getData" clearable
						style="margin-right: 10px;width: 100px;">
						<el-option v-for="item in dataList1" :key="item.entWasteId" :label="item.wasteName"
							:value="item.entWasteId"></el-option>
					</el-select>
				</div>

				<div>
					<span class="mr10 color-info">选择时间段</span>
					<el-date-picker v-model="params.year" type="year" placeholder="选择日期" @change="getData" value-format="yyyy"
						style="width: 100px;" :clearable="false">
					</el-date-picker>
				</div>

			</div>

			<div style="border-radius: 4px;display: flex;justify-content: space-between;align-items: center;">
				<div
					style="background: #fff;border-radius: 4px;padding: 0px 0 10px;flex: 1;border: 1px solid#EAF1FB;margin-right: 20px;">
					<div style="display: flex;align-items: center;padding-top:10px;font-weight: bold;">
						<div style="color: #3a3ef4;margin-right: 10px;">|</div>
						<div style="font-size: 15px;">处置量</div>
					</div>
					<div style="height: 200px;width: 100%;" id="chart1"></div>
				</div>



				<div style="background: #fff;border-radius: 4px;padding: 0px 0 10px;flex: 1;border: 1px solid#EAF1FB;">
					<div style="display: flex;align-items: center;padding-top:10px;font-weight: bold;height: 30px;">
						<!-- <div style="color: #3a3ef4;margin-right: 10px;">|</div>
						<div style="font-size: 15px;">处置单位</div> -->
					</div>
					<div style="height: 200px;width: 100%;" id="chart2"></div>
				</div>
			</div>
		</div>



		<div style="margin-top: 20px;background: #fff;border-radius: 4px;padding: 10px;">
			<div style="font-size: 15px;margin-bottom: 10px;font-weight: bold;">委外处置台账</div>

			<div style="background: #fff;border-radius: 4px;padding: 10px;">
				<el-table :data="tableData.list" style="width: 100%" size="mini" v-cloak>
					<el-table-column type="index" label="序号" width="50">
					</el-table-column>
					<el-table-column prop="disposeCode" label="委外利用/处置批次编码" width="210">
					</el-table-column>
					<el-table-column prop="outEntTime" label="委外利用/处置时间 " width="130">
						<template slot-scope="scope" v-if="scope &&scope.row && scope.row.outEntTime">
							<span>{{scope.row.outEntTime.split(" ")[0]}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="tagCode" label="容器/包装编号" width="150">
					</el-table-column>
					<el-table-column prop="packageTypeStr" label="容器/包装类型" width="100">
					</el-table-column>
					<el-table-column prop="date" label="容器/包装数量" width="100">
						<template slot-scope="scope">
							<span>1</span>
						</template>
					</el-table-column>
					<el-table-column label="危险废物名称" prop="wasteName" width="150">
					</el-table-column>
					<el-table-column prop="wasteType" label="危险废物类别" width="100">
					</el-table-column>
					<el-table-column prop="wasteCode" label="危险废物代码" width="100">
					</el-table-column>
					<el-table-column prop="amount" label="自行利用/处置量" width="150">
					</el-table-column>
					<el-table-column prop="unitValue" label="计量单位" width="100">
					</el-table-column>

					<el-table-column prop="targetName" label="自行利用/处置设施编码" width="150">
					</el-table-column>
					<el-table-column prop="disposeMethod" label="自行利用/处置类型方式" width="150">
					</el-table-column>
					<el-table-column prop="selfDisposeCompleteTime" label="自行利用/处置完毕时间" width="150">
					</el-table-column>
					<el-table-column prop="operatorName" label="自行利用/处置部门经办人" width="150">
					</el-table-column>
					<el-table-column prop="produceCode" label="产生批次编号/出库批次编码" width="150">
					</el-table-column>
				</el-table>
				<div v-show="tableData.list&&tableData.list.length>0" align="right" style="margin-top: 10px">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page.sync="tableData.pageIndex" :page-sizes="[10,20,30,50]" :page-size="tableData.pageSize"
						layout="total, sizes, prev, pager, next, jumper" :total="tableData.total">
					</el-pagination>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	import moment from 'moment'
	import * as echarts from 'echarts';

	let that
	export default {
		name: '',
		data() {
			return {
				dataList1: [],
				params: {
					year: moment().format('YYYY'),
					entWasteId: ''
				},
				totalParams1: {
					show: true,
					total: 0
				},
				tableData: {
					total: 0,
					pageIndex: 1,
					pageSize: 20,
					list: []
				},
			}
		},
		created: function() {},
		mounted: function() {
			that = this
			that.params.ticketId = that.$store.state.token
			that.getEntWasteInfoByEntId()
			that.getData()
		},

		methods: {

			getEntWasteInfoByEntId() {
				that.ajax({
					url: '/hwReport/getWasteList?ticketId=' + that.params.ticketId,
					data: "",
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						if (result.data) {
							that.dataList1 = result.data
						}
					},
				})
			},

			handleSizeChange: function(val) {
				that.tableData.pageIndex = 1;
				that.tableData.pageSize = val;
				that.getTableData();
			},

			handleCurrentChange: function(val) {
				that.tableData.pageIndex = val;
				that.getTableData();
			},

			getData() {
				that.getTableData()
				that.getProduceList()
				that.getMonthProduceList()
			},

			getTableData() {
				let apiName = "/standBook/pageDocumentSelfDisposeStandBook"
				that.ajax({
					url: apiName + '?ticketId=' + that.params
						.ticketId + '&pageIndex=' + that.tableData.pageIndex + '&pageSize=' + that
						.tableData.pageSize,
					data: JSON.stringify(that.params),
					contentType: 'application/json',
					dataType: 'json',
					method: 'POST',
					success: function(result) {
						if (result.data) {
							that.tableData.list = result.data.records;
							that.tableData.total = result.data.total;
						}
					},
				})
			},

			getProduceList() {
				that.ajax({
					url: 'hwReport/getDisposeListByTargetName',
					contentType: 'application/json',
					data: JSON.stringify(that.params),
					success: function(result) {
						if (result.data && result.data.length > 0) {
							let yAxisData = []
							let seriesData = []
							for (let item of result.data) {
								yAxisData.push(item.targetName || '无')
								seriesData.push(item.totalAmount)
								item.name = item.targetName || '无'
								item.value = item.totalAmount
							}
							that.formPieChart("chart2", yAxisData, result.data)


							that.$forceUpdate()
						} else {
							that.totalParams1.show = false
						}
					},
				})
			},

			getMonthProduceList() {
				that.ajax({
					url: 'hwReport/getMonthDisposeList',
					contentType: 'application/json',
					data: JSON.stringify(that.params),
					success: function(result) {
						if (result.data) {
							let xAxisData = []
							let seriesData = []
							for (let item of result.data) {
								xAxisData.push(item.month)
								seriesData.push(item.qty)

							}

							that.formcategory("chart1", xAxisData, seriesData)
							that.$forceUpdate()
						}
					},
				})
			},


			formPieChart(chartId, yAxisData, seriesData) {
				console.log(yAxisData)
				var chartDom = document.getElementById(chartId);
				var myChart = echarts.init(chartDom);
				var option;

				option = {
					grid: {
						right: "5%",
					},
					tooltip: {
						trigger: 'item',
						formatter: '{a} <br/>{b} : {c} ({d}%)'
					},
					legend: {
						type: 'scroll',
						orient: 'vertical',
						letf: 10,
						right: 10,
						top: 20,
						bottom: 20,
						data: yAxisData,
						formatter: function(name) {
							return (name.length > 15 ? (name.slice(0, 15) + "...") : name)
						}
					},
					series: [{
						name: '去向',
						type: 'pie',
						radius: '75%',
						center: ['40%', '50%'],
						data: seriesData,
						right: 10,
						label: {
							normal: {
								show: false
							},
						},
						labelLine: {
							normal: {
								show: false
							}
						},
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				};

				option && myChart.setOption(option);
			},


			formcategory(charyId, xAxisData, seriesData) {
				var chartDom = document.getElementById(charyId);
				var myChart = echarts.init(chartDom);
				var option;

				option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					grid: {
						top: "12%",
						bottom: "10%"
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: xAxisData,
						splitLine: {
							show: false,
						},
						axisTick: {
							show: false // 不显示坐标轴刻度线
						},
						axisLine: {
							lineStyle: {
								opacity: 0 //将y轴刻度线的opacity属性设置为0，即为隐藏刻度线
							}
						},
					},
					yAxis: {
						type: 'value',
						splitLine: {
							show: false,
						},
					},
					series: [{
						data: seriesData,
						type: 'line',
						smooth: true,
						symbol: "none",
						areaStyle: {
							color: {
								type: 'linear',
								colorStops: [ // 渐变颜色
									{
										offset: 1,
										color: '#EBF3FD',
									},
									{
										offset: 1,
										color: '#EBF3FD',
									},
								],
								global: false,
							},
						},
					}]
				};

				option && myChart.setOption(option);

			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.el-col-20 {
		height: 60px;
		line-height: 60px;
		overflow-y: scroll;
	}

	>>>.el-input__inner,
	.el-textarea__inner {
		background: #E7EFF9;
	}

	::v-deep .el-table th {
		background: #EAF1FB;
	}
</style>